Rounded Corner Menu Buttons With Icons

This page demonstrates a vertical menu with rounded corner, drop-shadowed buttons that support text resizing. There are icons on the butttons which do not resize, but do change for the selected menu item.

The markup cost is three spurious spans within each anchor of the menu list. One displays the top right corner, and one the top edge of the button. IE does not show the correct link mouse cursor over these spans, which is why they have been kept as small as possible (though the link does work over any part of the button). The last span contains the menu text and is there for cryptic IE reasons (see A List Apart - Sliding Doors of CSS). The anchor background displays the main area of the button graphic.

The text and background colours are just the colours for the anchor, which shows through the transparent centre of the button graphic. Thus the colours are the same if images are unavailable. The icons are background images to the list item itself, which is slid upwards to show the icon for a selected menu item.

Back to demo